<template>
    <div class="login_container">
        <!-- TODO: 这边以后放轮播图 -->
        <div class="left_img">
            <img src="../../img/besrey-login-left.webp" alt="">
        </div>
        <!-- 这边放登录页 -->
        <div class="right_login_box">
            <div class="login_box">
                <!-- logo区域 -->
                <div class="avatar_box">
                    <img src="../../img/login-logo.png" alt="">
                </div>
               
            </div>

        </div>
    </div>
</template>

<script>
export default {
    name: 'LoginVue',
    data(){

    },
    methods:{
        
    }
}
</script>

<style lang="less" scoped>

    

    .login_container{
        display: flex;
        height: 100%;
        margin: 0 15px;
    }

    .left_img{
        height: 100%;
        width: 60%;
    }

    .left_img img{
        width: 100%;
        height: 70%;
    }

    .right_login_box{
        height: 100%;
        width: 40%;
        background-color: #f5f5f5;
    }

    .login_box {
        width: 450px;
        height: 300px;
        background-color: #fff;
        border-radius: 3px;
        position: absolute;
        left: 80%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .login_form{
        position: absolute;
        bottom: 0;
        width: 100%;
        padding:0 20px;
        box-sizing: border-box;
    }

    .btns{
        display: flex;
        justify-content: flex-end;
    }

    .avatar_box{
        height: 45px;
        width: 140px;
        border: 1px solid #eee;
        border-radius: 50%;
        padding: 20px;
        box-shadow: 0 0 10px #ddd;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #eee;
        }
    }
</style>